<!DOCTYPE html>
<html>
<head>
    <meta charset = "utf-8">
    <title></title>
    <link rel="stylesheet" href='/plug-in/pear/css/pear.css' media="all">
    <link rel = "stylesheet" type = "text/css" href = "/css/base.css" />
</head>
<body>
<div class = "page-content">
    <div id = "cascader" class = "towexin-cascader"></div>
    <div style = "margin: 10px 0; line-height: 20px">
        <a href = "javascript:" class = "layui-badge layui-bg-blue getValue" style = "margin-right: 14px">取值</a>
        <span id = "return"></span>
    </div>
    <div style = "margin: 10px 0">
        <a href = "javascript:" class = "layui-badge layui-bg-blue setValue">赋值</a>
        <span>：广西壮族自治区贺州市钟山县xxx</span>
    </div>
    <div style = "margin: 10px 0">
        <a href = "javascript:" class = "layui-badge layui-bg-blue setValueNull" style = "margin-right: 20px">重置</a>
    </div>
    <fieldset class = "layui-elem-field layui-field-title" style = "margin-top: 30px;">
        <legend>使用方法</legend>
    </fieldset>
    <pre class = "code-tip">

    </pre>
</div>

<script src = "/plug-in/jquery/jquery-3.5.1.min.js" type = "text/javascript" charset = "utf-8"></script>
<script src = "/plug-in/layui/layui.js" type = "text/javascript" charset = "utf-8"></script>
<script src = "/plug-in/lay-config.js" type = "text/javascript" charset = "utf-8"></script>
<script type = "text/javascript">
    layui.use(["towexinCascader"], function () {

        let towexinCascader = layui.towexinCascader

        let cascader = towexinCascader.render({
            elem: "#cascader",
            success: function (res) {
                // 选择完成返回的值，也可以通过 cascader.getValue() 获取
                // console.log(res)
            }
        })

        layui.$("a.getValue").click(function () {
            layui.$("#return").text(layui.$("input[name='cascader']").val())
        })

        layui.$("a.setValue").click(function () {
            cascader.setValue(["广西壮族自治区", "贺州市", "钟山县", "xxx"])
        })

        layui.$("a.setValueNull").click(function () {
            cascader.setValue([])
            layui.$("#return").text('')
        })

    })


    let code = '// 页面添加 div, 定义id 指定 class = "towexin-cascader"\n' +
        '// 如\n' +
        '<div id="demo" class="towexin-cascader"></div>\n' +
        ' \n' +
        ' \n' +
        ' \n' +
        '// 在 layui.js 后面引入 lay-config.js\n' +
        '// 如\n' +
        '<script src="/plug-in/lay-config.js" type="text/javascript" charset="utf-8"><\/script>\n' +
        '<script type = "text/javascript">\n' +
        '   // 在 js 中使用模块\n' +
        '   layui.use(["towexinCascader"], function() {\n' +
        '       let towexinCascader = layui.towexinCascader\n' +
        ' \n' +
        '       // 初始化示例\n' +
        '       let cascader = towexinCascader.render({\n' +
        '           elem: "#demo",      // id选择器\n' +
        '           success: function(res){\n' +
        '               // 选择完成返回的值，也可以通过 cascader.getValue() 获取\n' +
        '               // console.log(res)\n' +
        '           }\n' +
        '       })\n' +
        ' \n' +
        '       // 初始化可选参数\n' +
        '       elem: 元素选择(id带"#", class带".")\n' +
        '       inputName: 表单name属性, 默认 "cascader"\n' +
        '       inputId: 表单id属性\n' +
        '       placeholder: 选择前提示内容, 默认 "选择省市区"\n' +
        '       layVerify: 表单验证, 同layui表单验证\n' +
        '       theme.color: 主题颜色, 默认 "#2196F3", 如 {theme: {color: "#2196F3"}}\n'+
        '       success: 选择完成回调\n'+
        ' \n' +
        '       // 赋值格式\n' +
        '       cascader.setValue(["广西壮族自治区", "贺州市", "钟山县", "xxx"])         // 指定的值\n' +
        '       cascader.setValue([])       // 空值\n' +
        '   })\n' +
        '<\/script>\n';

    layui.$(".code-tip").text(code);
    layui.code({
        elem: ".code-tip",
        encode: true,
        skin: 'notepad',
        height: "500px"
    });
</script>
</body>
</html>
